<template>
  <div>
    <div class="tfbody">
        <div class="tfdaohang">
            <h5 class="mb-2">商品分类</h5>
            <el-menu active-text-color="#2e7d32" class="el-menu-vertical-demo" unique-opened :collapse-transition="true">
        
                <el-sub-menu  v-for="(zhonglei,index) in types" :key="index" :index="index.toString()" >
                  <template #title>
                    <span>{{ zhonglei.name }}</span>
                  </template>
                    <el-menu-item style="height: 35px;" v-for="(kindname,index2) in zhonglei.kinds" :key="index2" :index="`${index}-${index2}`" @click="searchprdct(kindname)">{{ kindname }}</el-menu-item>
                </el-sub-menu>

            </el-menu>
        </div>

        <div class="tfview">
            <div class="searchprdct">
                <div class="search">
                    <div class="search-wrapper">
                        <input 
                            type="text" 
                            class="search-input" 
                            placeholder="搜索产品"
                            v-model="searchKeyword"
                            @keyup.enter="handleSearch"
                        >
                        <button class="search-btn" @click="handleSearch">
                            搜索
                        </button>
                    </div>
                </div>
                <div class="shopping">
                    <svg t="1753955978746" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="36014" width="40" height="40"><path d="M808.01792 901.12m-59.04384 0a2.883 2.883 0 1 0 118.08768 0 2.883 2.883 0 1 0-118.08768 0Z" fill="#2e7d32" p-id="36015"></path><path d="M430.10048 842.07616c-32.54272 0-59.04384 26.39872-59.04384 59.00288 0 32.62464 26.50112 59.0848 59.04384 59.0848 32.58368 0 59.00288-26.46016 59.00288-59.0848C489.10336 868.47488 462.68416 842.07616 430.10048 842.07616z" fill="#2e7d32" p-id="36016"></path><path d="M292.29056 640.9216l-58.18368-361.75872C196.95616 66.19136 16.09728 63.83616 14.29504 63.83616L14.1312 120.13568c5.50912 0.1024 135.5776 3.52256 164.31104 168.36608l57.87648 358.58432c2.9696 48.10752 36.18816 139.18208 140.86144 139.18208l553.2672 0 0-56.4224L377.18016 729.84576C300.9536 729.84576 293.2736 652.288 292.29056 640.9216z" fill="#2e7d32" p-id="36017"></path><path d="M832.38912 674.16064 476.93824 674.16064c-87.552 0-127.97952-69.46816-137.13408-106.1888-0.47104-2.29376-26.33728-157.34784-43.47904-267.01824-6.26688-39.97696 0.22528-71.5776 19.31264-93.88032 17.42848-20.39808 43.8272-31.15008 76.32896-31.15008 14.2336 0 24.30976 2.1504 24.30976 2.1504 1.80224 0.12288 407.90016 50.09408 500.16256 50.09408 39.99744 0 68.97664 12.1856 86.15936 36.18816 25.41568 35.55328 11.30496 79.95392 9.60512 84.8896l-43.49952 205.4144C966.84032 561.50016 933.15072 674.16064 832.38912 674.16064zM391.9872 235.86816c-8.23296 0-23.22432 1.31072-30.78144 10.1376-6.98368 8.15104-8.99072 24.3712-5.65248 45.6704 17.12128 109.42464 42.9056 264.11008 42.9056 264.11008 1.1264 3.72736 17.408 58.42944 78.45888 58.42944l355.45088 0c56.17664 0 78.00832-73.40032 78.2336-74.1376l43.95008-206.78656c2.94912-9.70752 5.28384-25.84576-0.79872-34.18112-5.16096-7.08608-18.41152-10.97728-37.29408-10.97728-95.92832 0-492.9536-48.8448-509.80864-50.93376C403.6608 236.66688 398.70464 235.86816 391.9872 235.86816z" fill="#2e7d32" p-id="36018"></path></svg>
                    <div v-if="carnumber > 0" class="carcount">{{ carnumber }}</div>
                </div>
            </div>

            <div>
                <FiltrateVue/>
            </div>
            

            <div class="showprdct">
                <ProductCard 
                    v-for="product in products" 
                    :key="product.primaryId"
                    :primary_id="product.primaryId"
                    :crop_name="product.cropName"
                    :crop_image="product.cropImage"
                    :planting_location="product.plantingLocation"
                    :quality_grade="product.qualityGrade"
                    :suggested_retail_price="product.suggestedRetailPrice"
                />
            </div>

            <!-- <div class="hotprdct">
                <div class="hotprdcttitle">
                    <h2>热门推荐</h2>
                </div>
                <div class="hotprdctshow">
                    <ProductCard 
                        v-for="product in hotProducts" 
                        :key="product.primary_id"
                        :primary_id="product.primary_id"
                        :crop_name="product.crop_name"
                        :crop_image="product.crop_image"
                        :quality_grade="product.quality_grade"
                        :suggested_retail_price="product.suggested_retail_price"
                    />
                </div>
            </div> -->
        </div>
    </div>
    <div class="foot">
        <div>
            <svg t="1753938415530" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6252" width="70" height="70"><path d="M736.40011852 322.6130963H587.73048889c-7.76722963 0-14.19946667-6.31087408-14.19946667-14.19946667v-8.73813333c0-30.21937778-24.51531852-54.7346963-54.7346963-54.7346963H177.28094815c-30.21937778 0-54.7346963 24.51531852-54.7346963 54.7346963v315.78642962c0 30.21937778 24.51531852 54.7346963 54.7346963 54.7346963h13.47128888c0 51.33653333 41.74885925 93.08539259 93.0853926 93.08539259s93.08539259-41.74885925 93.08539259-93.08539259h292.48474075c0 51.33653333 41.74885925 93.08539259 93.08539258 93.08539259s93.08539259-41.74885925 93.0853926-93.08539259h75.73048888c7.76722963 0 14.19946667-6.31087408 14.19946667-14.19946667V531.9642074c0-3.76225185-1.45635555-7.40314075-4.12634073-10.07312593L746.47324445 326.8608c-2.66998518-2.66998518-6.31087408-4.2477037-10.07312593-4.2477037z m-395.64325927 347.70488888c0 31.31164445-25.48622222 56.79786667-56.79786666 56.79786667s-56.79786667-25.48622222-56.79786667-56.79786667c0-31.31164445 25.48622222-56.79786667 56.79786667-56.79786666s56.79786667 25.48622222 56.79786666 56.79786666z m478.7768889 0c0 31.31164445-25.48622222 56.79786667-56.79786667 56.79786667s-56.79786667-25.48622222-56.79786666-56.79786667c0-31.31164445 25.48622222-56.79786667 56.79786666-56.79786666s56.79786667 25.48622222 56.79786667 56.79786666z m57.6474074-133.25653333H653.99466667c-7.76722963 0-14.19946667-6.31087408-14.19946667-14.19946667V374.55644444c0-7.76722963 6.31087408-14.19946667 14.19946667-14.19946667h74.75958518c3.76225185 0 7.40314075 1.45635555 10.07312593 4.12634075L887.13291852 512.91022222c2.66998518 2.66998518 4.12634075 6.31087408 4.12634073 10.07312592 0 7.76722963-6.31087408 14.0781037-14.0781037 14.07810371z" p-id="6253" fill="#2e7d32"></path></svg>
            <span class="title">全程追溯</span>
            <span >从田间到餐桌，全程可追溯</span>
        </div>
        <div>
            <svg t="1753938731388" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25556" width="70" height="70"><path d="M512.928 294.88a313.216 313.216 0 0 0-315.616 310.656 316.16 316.16 0 0 0 632.192-0.32 307.776 307.776 0 0 0-92.8-219.552 319.296 319.296 0 0 0-223.776-90.784z m162.944 282.432l-62.528 59.424 14.944 84.128c5.184 28.544-11.584 40.704-37.696 26.944l-76.8-40-76.96 40c-26.144 13.28-42.88 1.856-37.76-26.944l14.944-84.128-62.4-59.424c-21.056-20.096-14.944-39.296 14.4-43.84l86.208-12.384 38.72-76.8c13.056-25.6 33.6-26.016 47.104 0l38.656 76.8 86.4 12.384c27.232 4.224 34.272 23.424 12.768 43.968zM613.344 115.68a21.856 21.856 0 0 0-21.344 17.184l-60.16 116.608a375.296 375.296 0 0 1 205.568 79.584l89.984-178.368a20.576 20.576 0 0 0 4.64-12.8 23.104 23.104 0 0 0-22.88-21.984l-195.744-0.224z m-181.792 17.184a21.856 21.856 0 0 0-21.44-17.184H214.368a22.56 22.56 0 0 0-16 6.4 21.824 21.824 0 0 0-6.56 15.584 20.48 20.48 0 0 0 4.64 12.8l89.984 178.592a372.96 372.96 0 0 1 205.088-79.68z" p-id="25557" fill="#2e7d32"></path></svg>
            <span class="title">品质保证</span>
            <span >严格筛选优质农产品</span>
        </div>
        <div>
            <svg t="1753938793126" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="28735" width="70" height="70"><path d="M512 170.666667c107.093333 66.986667 214.186667 120.576 321.28 160.64 0 262.826667-107.093333 436.821333-321.28 522.026666l-0.682667-0.256-0.597333 0.256c-213.333333-85.205333-320-259.2-320-522.026666 106.666667-40.106667 213.333333-93.610667 320-160.64l0.64 0.426666L512 170.666667z m0 85.333333v512c160.64-63.914667 240.938667-194.432 240.938667-391.509333C672.64 346.410667 592.298667 306.261333 512 256z" fill="#2e7d32" p-id="28736"></path></svg>
            <span class="title">安全可靠</span>
            <span >多重认证保障食品安全</span>
        </div>
        <div>
            <svg t="1753938918378" class="icon" viewBox="0 0 1555 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="34865" width="70" height="70"><path d="M1452.26071344 32.02133281a35.55476531 35.55476531 0 0 1 34.63034156 47.71449563c-131.5526325 361.27197187-326.89051313 497.12673094-671.62951875 574.10279718l-1.91995781 0.35554782a888.40692469 888.40692469 0 0 0-79.9626675 277.07828718c-4.90655719 40.81687031-63.64303031 42.09684188-70.36288032 1.52885532-7.96426781-48.1767075-27.02162156-88.56692063-60.65643-118.71736219l12.79971563-7.00428844c-163.76524969 91.660185-259.79867156 97.20672844-388.32914813 52.265505l-30.328215-10.98642281a690.86464781 690.86464781 0 0 0-18.98624531-6.57763125c-39.64356375-13.01304375-67.90960219-15.85742531-100.90442436-7.67982938-33.81258188 8.35537031-58.23870562-31.892625-35.19921751-58.0253775 245.96786719-279.06935437 461.96306719-326.85495844 628.60825312-126.36163593a35.55476531 35.55476531 0 0 1-54.68322937 45.43898999c-118.966245-143.14348594-265.59409781-128.17492969-453.89213532 57.17206313l-9.67089656 9.56423156 6.07986469 1.0666425c10.02644343 2.02662188 20.33732625 4.62211969 31.00375594 7.82204907l10.84420312 3.44881218 13.43970187 4.58656407 27.83938126 10.09755375c100.97553375 36.83473687 171.23175001 39.39468 287.10473062-16.49741157-53.54547655-18.06182062-125.010555-23.5017-218.16404062-13.72413937a35.55476531 35.55476531 0 1 1-7.43094563-70.71842813c193.98680063-20.40843562 316.29519375 23.53725469 380.43598969 109.54423219l2.38216969 3.30659344 3.59103094-13.79524875c54.71878406-204.33323719 176.06719875-386.12475281 363.26303906-544.69900688l15.28854844-12.79971562a35.55476531 35.55476531 0 1 1 45.26121655 54.86100281c-106.91317969 88.17581812-191.49796688 183.427035-253.93213499 285.82476 267.1940625-69.15401906 425.23499438-184.24479469 538.15693031-455.31432656l3.80436-9.38645813-11.73307313 0.67554-31.92817875 2.13328594c-435.97253438 32.07039844-626.01275531 174.18279563-590.45799 425.23499531l1.35108094 9.03091032a35.55476531 35.55476531 0 0 1-70.22066156 11.34197062C644.63421687 224.47927813 904.75288062 50.9720225 1452.22515875 32.02133281z" fill="#2e7d32" p-id="34866"></path></svg>
            <span class="title">绿色生态</span>
            <span >倡导健康绿色生活方式</span>
        </div>
        
    </div>
  </div>
</template>




<script setup>
// import router from '@/router/index.js'// 导入路由实例
import ProductCard from '@/components/ncpsy/tradingfloor/tfpage1/ProductCard.vue'
import FiltrateVue from '@/components/ncpsy/tradingfloor/tfpage1/FiltrateVue.vue'
import { ref, onMounted } from 'vue'
import { listArchive } from '@/api/ncpsy/management/archive'

const carnumber = ref(0) // 购物车中商品的数量

const types = ref([
  {
    name: '新鲜蔬菜',
    kinds: ['白菜', '菠菜', '芹菜', '黄瓜', '西红柿', '茄子', '青椒', '土豆', '胡萝卜', '西兰花', '生菜', '油麦菜', '冬瓜', '南瓜']
  },
  {
    name: '水果生鲜',
    kinds: ['苹果', '香蕉', '梨子', '橙子', '橘子', '草莓', '蓝莓', '葡萄', '芒果', '菠菜', '猕猴桃', '火龙果', '柚子', '樱桃', '西瓜']
  },
  {
    name: '粮油调味',
    kinds: ['大米', '面粉', '小米', '燕麦', '玉米碴', '花生油', '菜籽油', '橄榄油', '大豆油', '玉米油', '食盐', '酱油', '醋', '白砂糖', '冰糖']
  },
  {
    name: '畜禽肉类',
    kinds: ['五花肉', '里脊肉', '排骨', '牛腩', '牛里脊', '牛腱子', '羊肉', '羊腿', '羊排', '羊肉卷', '鸡胸肉', '鸡腿', '鸡翅', '鸭胸', '鸭脖', '鸭腿', '猪肝', '猪心', '鸡胗']
  },
  {
    name: '水产海鲜',
    kinds: ['鲫鱼', '草鱼', '鲈鱼', '带鱼', '三文鱼', '鳕鱼', '基围虾', '小龙虾', '对虾', '龙虾']
  },
  {
    name: '农副产品',
    kinds: ['黄豆', '绿豆', '香菇', '银耳', '腐竹核桃', '花生', '板栗', '杏仁', '棉花', '蜂蜜', '茶叶', '红薯干', '柿饼', '干辣椒', '芝麻']
  }
])

// 产品数据
const products = ref([])
const hotProducts = ref([])
const allProducts = ref([]) // 存储所有产品数据
const searchKeyword = ref('') // 搜索关键词
// 获取产品数据
const fetchProducts = async () => {
  try {
    // 调用listArchive API获取产品数据
    const response = await listArchive({ currentStatus: '已上架' })
    
    // 检查响应数据
    if (response.code === 200) {
      // 正确处理API响应数据结构
      console.log("API返回的数据:", response.rows);
      
      // 验证数据结构并设置热销商品数据
      if (Array.isArray(response.rows) && response.rows.length > 0) {
        // 确保每个产品都有必要的字段
      products.value = response.rows
      allProducts.value = response.rows // 存储所有产品数据
      
      // 设置热销商品数据（取前几个作为示例）
      hotProducts.value = products.value.slice(0, 4)
        console.log("处理后的产品数据:", products.value);
      } else {
        // 如果没有有效数据，使用默认数据
        console.warn('API返回的数据为空或格式不正确')
        useDefaultData()
      }
    } else {
      // 如果API调用失败，使用默认数据
      console.error('获取产品数据失败:', response.msg)
      useDefaultData()
    }
  } catch (error) {
    // 如果出现异常，使用默认数据
    console.error('获取产品数据异常:', error)
    useDefaultData()
  }
}

// 使用默认数据（当API调用失败时）
const useDefaultData = () => {
  products.value = [
    {
      primary_id: 1,
      crop_name: '有机蔬菜',
      crop_image: '@/assets/images/bander.png',
      quality_grade: 'A级',
      suggested_retail_price: '12.8'
    },
    {
      primary_id: 2,
      crop_name: '新鲜水果',
      crop_image: '@/assets/images/bander.png',
      quality_grade: 'A级',
      suggested_retail_price: '25.6'
    }
  ]
  
  allProducts.value = [...products.value] // 存储所有产品数据
  
  hotProducts.value = [
    {
      primary_id: 3,
      crop_name: '热销蔬菜',
      crop_image: '@/assets/images/bander.png',
      quality_grade: 'A级',
      suggested_retail_price: '15.8'
    },
    {
      primary_id: 4,
      crop_name: '热销水果',
      crop_image: '@/assets/images/bander.png',
      quality_grade: 'A级',
      suggested_retail_price: '30.0'
    }
  ]
}

const searchprdct = (kindname) => {
  // 清空搜索关键词
  searchKeyword.value = kindname
  // 执行搜索
  handleSearch()
}

// 处理搜索功能
const handleSearch = () => {
  if (!searchKeyword.value.trim()) {
    // 如果搜索关键词为空，显示所有产品
    products.value = [...allProducts.value]
    return
  }
  
  // 将搜索关键词转换为小写，实现不区分大小写的搜索
  const keyword = searchKeyword.value.toLowerCase().trim()
  
  // 过滤产品，根据作物名称进行匹配
  products.value = allProducts.value.filter(product => {
    // 检查作物名称是否包含搜索关键词
    if (product.cropName && product.cropName.toLowerCase().includes(keyword)) {
      return true
    }
    
    // 也可以根据其他字段进行搜索，如种植地点
    if (product.plantingLocation && product.plantingLocation.toLowerCase().includes(keyword)) {
      return true
    }
    
    // 或者根据质量等级进行搜索
    if (product.qualityGrade && product.qualityGrade.toLowerCase().includes(keyword)) {
      return true
    }
    
    return false
  })
}

// 组件挂载时获取数据
onMounted(() => {
  fetchProducts()
})
</script>

<style scoped>
.tfdaohang{ 
    width: 220px;
    padding: 10px;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;  /* Firefox 隐藏滚动条 */
    -ms-overflow-style: none;  /* IE/Edge 隐藏滚动条 */
}
/* Chrome/Safari/Opera 隐藏滚动条 */
.tfdaohang::-webkit-scrollbar {
    display: none;
}
.tfbody{
    display: flex;
    flex: 1;
}

h5{
    text-align: left;
    margin-left: 20px;
    font-size: 20px;
}

.tfview{
    min-height: 100vh;
    width: 100%;
}
.foot{
    height: 220px;
    background: rgba(203, 208, 212, 0.336);
    padding: 10px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.foot>div{
    width: 420px;
    margin: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
span{
    line-height: 24px;
    font-size: 16px;
    color: rgba(75, 85, 99, 1);
}
.title{
    color: #000;
}



.searchprdct{
    display: flex;
    flex: 1;
}
.search{
    width: 100%;
    display: flex;
    justify-content: center;
}
.search-wrapper {
    border: 1px solid rgba(128, 128, 128, 0.384);
  display: flex; 
  align-items: center;
  background-color: #fff;
  border-radius: 5px;     
  overflow: hidden;
  width: 94%;
}
.search-input {
  flex: 1;
  height: 50px;
  padding: 0 12px;
  border: none;
  outline: none;
  font-size: 16px;
  color: #333;
}
.search-input::placeholder {
  color: #999;            /* 浅灰色占位文字 */
}
.search-btn{
    border: none;
    border-radius: 5px;
    width: 80px;
    height: 50px;
    font-size: 20px;
    color: white;
    background-color: #2e7d32;
    
}
.shopping{
    min-width: 50px;
    margin: 0 50px 0 0px;
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.carcount{
    width: 20px;
    height: 20px;
    background-color: #eb4242;
    border-radius: 10px;
    color: white;
    line-height: 20px;
}

.showprdct{
    min-height: 450px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 4px;
    padding: 10px;
}
.hotprdct{
    min-height: 450px;
}
.hotprdcttitle{
    height: 60px;
    padding: 0 30px;
    text-align: left;
}
.hotprdctshow{
    display: flex;
    justify-content: start;
}
</style>